<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
<!-- 查询    -->
    <div :model="tops" class="demo-input-size" >
         员工名称： <el-input  v-model="tops.input"  style="width: 12%"  placeholder="请输入内容" ></el-input>

<!--        所有的部门-->
        员工部门：
        <template>
            <el-select v-model="tops.dId" placeholder="请选择部门">
                <el-option label="请选择" value="null"></el-option>
                <el-option
                        v-for="item in DepName"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </template>


        <el-button type="primary" icon="el-icon-search" @click="Fuzzypaginationquery" >搜索</el-button>

    </div>
<!--    员工账号分配-->
    <label>--------------------------------------------------------</label>
    <div>
  <el-button type="primary" @click="dialogFormVisible = true">+员工账号分配</el-button>
        <div class="block">
            <el-row :gutter="1" type="flex" class="row-bg" justify="space-between">
                <el-col :span="2">
                    <span>每条显示条数:</span>
                </el-col>
                <el-col :span="2">
                    <!--每页可显示条数-->

                    <el-pagination
                            @size-change="handleSizeChange"
                            :current-page="current"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="5"
                            layout="sizes"
                            :total="total">
                    </el-pagination>
                </el-col>
                <el-col :span="19">

                </el-col>

            </el-row>
        </div>


    </div>
<!--    表格-->
    <div>

        <el-table

                :data="tableData"
                style="width: 100%">

            <el-table-column
                    label="编号"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工编号"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.no }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工姓名"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登录账号"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.loginAccount }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属部门"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.department }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工职位"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.post }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="员工成绩"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.grade }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入职时间"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.entryTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工状态"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.status }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="账号状态"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.accountStatus=='-1'" style="color: red">已停用</span>
                    <span v-else style="color: #5daf34">已激活</span>
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-tickets"
                            @click="handleEdit(scope.$index, scope.row)"

                    ></el-button>
                    <el-button
                            size="mini"
                            @click="changeStatus(scope.$index, scope.row)"
                            type="success"
                            icon="el-icon-check"
                    ></el-button>
                </template>
            </el-table-column>

        </el-table>
        <!--    分页-->
        <div class="block">
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6">
                   <span v-if="current*pageSize>total">第{{(current-1)*pageSize+1}}到{{total}}条记录,总共{{total}}条</span>
                   <span v-else>第{{(current-1)*pageSize+1}}到{{current*pageSize}}条记录,总共{{total}}条</span>
                </el-col>
                <el-col :span="6">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="pp"
                            :total="total"
                            :current-page="current"
                            :page-size="pageSize"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

<!--        添加删除弹出层对话框  -->
        <el-dialog title="添加修改员工信息"   :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="staffs">

                <el-form-item label="员工名称" :label-width="formLabelWidth">
                    <el-input v-model="staffs.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="登录账号" :label-width="formLabelWidth">
                    <el-input v-model="staffs.loginAccount" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="登录密码" :label-width="formLabelWidth">
                    <el-input v-model="staffs.password" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="员工电话号码" :label-width="formLabelWidth">
                    <el-input v-model="staffs.tel" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="所属部门" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="staffs.dId" placeholder="请选择" @change="selectPostName">
                            <el-option
                                    v-for="item in DepName"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="员工职位" :label-width="formLabelWidth">
                    <template>
                     <el-select v-model="staffs.pId" placeholder="请选择">
                         <el-option
                                 v-for="item in postsName"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                         </el-option>
                     </el-select>
                    </template>
                </el-form-item>



                <el-form-item label="员工成绩" :label-width="formLabelWidth">
                    <el-input v-model="staffs.grade" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="员工状态" :label-width="formLabelWidth">

                    <template>
                        <el-select v-model="staffs.status" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>

                </el-form-item>

                <el-form-item label="所属企业" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="staffs.cId" placeholder="请选择">
                            <el-option
                                    v-for="item in compareName"
                                    :key="item.id"
                                    :label="item.companyName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="账号状态" :label-width="formLabelWidth">

                    <template>
                        <el-select v-model="staffs.accountStatus" placeholder="请选择">
                            <el-option
                                    v-for="item in zhanghao"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>

                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStaff">确 定</el-button>
            </div>
        </el-dialog>


    </div>



</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData: null,//表数据
                total:0,//总条数
                current:1, //当前页数
                pageSize:5, //每页条数
                dialogFormVisible: false,//控制对话框的显示

                staffs:{                      //添加用户对话框的数据
                    id:'',
                    name:'',
                    password:'',
                    loginAccount:'',
                    tel:'',
                    pId:'',
                    cId:'',
                    dId:'',
                    grade:'',
                    status:'',
                    accountStatus:''

                },
                formLabelWidth: '120px',
                //所有的职位
                postsName:[],
                //所有的部门
                DepName:[],
                //所有的企业
                compareName:[],
                options:[{
                    value:'正式员工',
                    label:'正式员工'
                },
                    {
                        value: '试用期员工',
                        label:'试用期员工'
                    }
                ],
                zhanghao:[{
                    value:'1',
                    label:'已激活'
                },
                    {
                        value: '-1',
                        label:'未激活'
                    }
                ],

                tops:{
                    input:null,
                    dId:null,
                }


            }
        },
        mounted() {
            this.loadPage(1,this.tops.input,this.tops.dId,this.pageSize)
            //加载所有的职位
            axios.get("/AllPostName").then(value => {
               this.postsName=value.data.data;
            }),

            //加载所有的子部门
            axios.get("/AllDepName").then(value => {
                this.DepName=value.data.data;
            }),

                //加载所有的企业
            axios.get("/AllCompareName").then(value => {
                this.compareName=value.data.data;
            })
        } ,
        methods:{
            pp(current){
                this.current=current;
                this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
            },
            //模糊查询
            Fuzzypaginationquery(){
                console.log(this.tops);
                if (this.tops.input==""){
                   this.tops.input=null
                   this.loadPage(1,this.tops.input,this.tops.dId,this.pageSize)
                }else {

                    this.loadPage(1,this.tops.input,this.tops.dId,this.pageSize)
                }


            },
            //显示修改用户的对话框
            handleEdit(index, row) {
                console.log(index, row);
                this.staffs=row;
                this.dialogFormVisible=true;
            },
            changeStatus(index, row) {
                // console.log(index, row);
                axios.put("/staffsToStatus/"+row.id).then(value => {
                    if (value.data.code==1){
                        this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
                    }
                })

            },
            //当前页面跳转方法
            loadPage(current,input,dId,pageSize){
                this.current=current;
                this.pageSize=pageSize;
                //查询商品
                axios.get("/staffs/"+current+"/"+input+"/"+dId+"/"+pageSize).then(value => {

                        this.tableData=value.data.records;
                        this.total = value.data.total;
                        this.pageSize = value.data.size;
                        this.current = value.data.current;

                })
            },
            //关闭对话框
            closeMyDialog(){      //对话框数据
                this.staffs={
                    id:'',
                    name:'',
                    password:'',
                    loginAccount:'',
                    no:'',
                    tel:'',
                    pId:'',
                    cId:'',
                    dId:'',
                    grade:'',
                    status:'',

                }
                this.loadPage(1,this.tops.input,this.tops.dId,this.pageSize)
            },
            //新增或者修改添加方法
            saveStaff(){
                //无id的时候就会进行添加，有id的时候就会进行修改
                if(this.staffs.id == ''){
                    console.log(this.staffs)

                    axios.post("/staffs", this.staffs).then(value => {
                        if(value.data.code == 1){
                            this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize);
                        }
                    });
                }else {
                    axios.put("/staffs",this.staffs).then(value => {
                        if(value.data.code == 1){
                            this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize);
                        }
                    });
                }
                this.dialogFormVisible=false;
            },
            //每页条数
            handleSizeChange(val) {
               this.current=1;
               this.pageSize=val;
               this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
            },
            selectPostName(val){
                console.log(val)
                axios.get("/AllPostNameByPid/"+val).then(value => {
                    this.postsName=value.data.data;
                })
            }


        }
    })

</script>

</body>
</html>